import { useState } from 'react'
import { Card, Form, Input, Switch, Button, message, Divider, InputNumber, Select } from 'antd'
import { SaveOutlined, LockOutlined } from '@ant-design/icons'
import './index.scss'

const SecuritySettings = () => {
  const [loading, setLoading] = useState(false)
  const [form] = Form.useForm()

  // 模拟安全配置数据
  const [config] = useState({
    enableLoginCaptcha: true,
    maxLoginAttempts: 5,
    lockoutDuration: 30,
    passwordMinLength: 6,
    passwordRequireUppercase: true,
    passwordRequireNumber: true,
    passwordRequireSpecial: false,
    passwordExpireDays: 90,
    enableTwoFactor: false,
    sessionTimeout: 30,
    enableIpWhitelist: false,
    ipWhitelist: '',
    enableLoginNotification: true,
  })

  // 保存配置
  const handleSave = async (values) => {
    setLoading(true)
    try {
      await new Promise(resolve => setTimeout(resolve, 1000))
      message.success('安全设置保存成功')
    } catch (error) {
      message.error('保存失败')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="security-settings-container">
      <Card title="安全设置" className="security-card">
        <Form
          form={form}
          layout="vertical"
          initialValues={config}
          onFinish={handleSave}
        >
          <div className="security-grid">
            <div className="security-column">
              <Divider orientation="left">登录安全</Divider>

              <Form.Item
                label="启用登录验证码"
                name="enableLoginCaptcha"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                label="最大登录尝试次数"
                name="maxLoginAttempts"
                rules={[{ required: true, message: '请输入最大登录尝试次数' }]}
                extra="超过此次数将锁定账号"
              >
                <InputNumber min={3} max={10} style={{ width: '100%' }} />
              </Form.Item>

              <Form.Item
                label="账号锁定时长（分钟）"
                name="lockoutDuration"
                rules={[{ required: true, message: '请输入锁定时长' }]}
              >
                <InputNumber min={5} max={120} style={{ width: '100%' }} />
              </Form.Item>

              <Form.Item
                label="启用双因素认证"
                name="enableTwoFactor"
                valuePropName="checked"
                extra="开启后需要手机验证码才能登录"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                label="登录通知"
                name="enableLoginNotification"
                valuePropName="checked"
                extra="登录时发送邮件通知"
              >
                <Switch />
              </Form.Item>

              <Divider orientation="left">密码策略</Divider>

              <Form.Item
                label="密码最小长度"
                name="passwordMinLength"
                rules={[{ required: true, message: '请输入密码最小长度' }]}
              >
                <InputNumber min={6} max={20} style={{ width: '100%' }} />
              </Form.Item>

              <Form.Item
                label="要求包含大写字母"
                name="passwordRequireUppercase"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                label="要求包含数字"
                name="passwordRequireNumber"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                label="要求包含特殊字符"
                name="passwordRequireSpecial"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                label="密码过期天数"
                name="passwordExpireDays"
                rules={[{ required: true, message: '请输入密码过期天数' }]}
                extra="0表示永不过期"
              >
                <InputNumber min={0} max={365} style={{ width: '100%' }} />
              </Form.Item>
            </div>

            <div className="security-column">
              <Divider orientation="left">会话管理</Divider>

              <Form.Item
                label="会话超时时间（分钟）"
                name="sessionTimeout"
                rules={[{ required: true, message: '请输入会话超时时间' }]}
              >
                <InputNumber min={5} max={120} style={{ width: '100%' }} />
              </Form.Item>

              <Divider orientation="left">IP访问控制</Divider>

              <Form.Item
                label="启用IP白名单"
                name="enableIpWhitelist"
                valuePropName="checked"
                extra="开启后只有白名单内的IP可以访问"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                label="IP白名单"
                name="ipWhitelist"
                extra="多个IP用逗号分隔，例如：192.168.1.1,192.168.1.2"
              >
                <Input.TextArea rows={3} placeholder="请输入IP白名单" />
              </Form.Item>

              <Divider orientation="left">安全建议</Divider>

              <div className="security-tips">
                <div className="tip-item">
                  <div className="tip-icon success">✓</div>
                  <div className="tip-content">
                    <h4>已启用登录验证码</h4>
                    <p>有效防止暴力破解</p>
                  </div>
                </div>
                <div className="tip-item">
                  <div className="tip-icon warning">!</div>
                  <div className="tip-content">
                    <h4>建议启用双因素认证</h4>
                    <p>提供额外的安全保护层</p>
                  </div>
                </div>
                <div className="tip-item">
                  <div className="tip-icon info">i</div>
                  <div className="tip-content">
                    <h4>定期更新密码策略</h4>
                    <p>保持系统安全性</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <Form.Item className="submit-btn">
            <Button type="primary" htmlType="submit" loading={loading} icon={<SaveOutlined />}>
              保存设置
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default SecuritySettings
